<template>
  <div
    :class="['base-module-wrapper', { selected: isSelected }]"
    @click.stop="$emit('select-module')"
  >
    <component
      :is="component"
      v-bind="module.props"
      :module="module"
      @delete-module="$emit('delete-module')"
      @update-module="$emit('update-module')"
      @sync-search-bg="$emit('sync-search-bg', $event)"
      @sync-banner-bg="$emit('sync-banner-bg', $event)"
    />
    <el-button
      size="mini"
      type="danger"
      class="delete-btn"
      @click.stop="$emit('delete-module')"
    >删除</el-button>
  </div>
</template>

<script>
export default {
  name: 'BaseModuleWrapper',
  props: {
    component: [String, Object],
    module: Object,
    isSelected: Boolean,
  },
  
}
</script>

<style scoped>
.base-module-wrapper {
  border: 1px solid transparent;
  padding: 0px;
  margin-bottom: 0px;
  position: relative;
  background: #fff;
}
.base-module-wrapper.selected {
  border-color: #409eff;
}
.delete-btn {
  position: absolute;
  top: 5px;
  right: 5px;
}
.module-wrapper {
  position: relative;
  z-index: 1;
}

</style>
